<template>
    <div class="container" v-loading="loading">
        <div class="stu-header" transiton="fade">
            <el-button type="primary" @click="exportData">导出</el-button>
        </div>
        <el-table
            :data="dataLists"
            border
            highlight-current-row 
            class="table" 
            :header-cell-style="{background: '#f1f1f1', color: '#333'}" 
            style="width: 100%">
            <el-table-column label="序号" align="center" width="60">
                <template #default="scope"><span>{{scope.$index+(pagenation.pageIndex- 1) * pagenation.pageSize + 1}} </span></template>
            </el-table-column>
            <el-table-column prop="areaName" label="校区" header-align="center" align="center"></el-table-column>
            <el-table-column prop="className" label="当前行政班级" header-align="center" align="center"></el-table-column>
            <el-table-column prop="classId" header-align="center" align="center" width="70" label="班级ID"></el-table-column>
            <el-table-column prop="" label="首次进班日期" header-align="center" align="center">
                <template #default="scope">
                    <span>{{dateToString2(scope.row.firstJoinClassTime)}}</span> 
                </template>
            </el-table-column>
            <el-table-column prop="" label="所报课程结束日期" header-align="center" align="center">
                <template #default="scope">
                    <span v-if="scope.row.ifRed === 1" style="color: red;">{{scope.row.courseEndDate}}</span>
                    <span v-else>{{scope.row.courseEndDate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="学生姓名" header-align="center" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="toStuDetail(scope.row)">{{ scope.row.customerName }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="studentId" label="学号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" header-align="center" align="center"></el-table-column>
            <el-table-column prop="stuType" label="考生类型" header-align="center" align="center"></el-table-column>
            <el-table-column prop="schoolName" label="学校名称" header-align="center" align="center"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pagenation.pageIndex"
                :page-size="pagenation.pageSize"
                :total="pagenation.totalPage"
                layout="total, sizes,prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>
</template>
<script setup name="studentDetails">
//学生详情（班级）
import { baseUrl } from "@/utils/api";
import { toCusInfo, dateToString,dateToString2 } from '@/utils/helper'; 
import { onMounted, getCurrentInstance, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
function downFile(blob, fileName) {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName);
    } else {
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    }
} 
let router = useRouter();
let loading = ref(false);
let loadingd = ref(false);
//获取上下文实例，ctx=vue2的this
const { ctx,proxy } = getCurrentInstance();
// let dateToString2 = dateToString2;
let dataLists = reactive([]);
let searchParam = reactive({});
let pagenation =reactive({
    pageIndex: 1,
    pageSize: 10,
    totalPage: 0,
});
let isDel = ref(false);

onMounted(()=>{
    getSessionSearch();
});
let getSessionSearch=()=>{
    if(JSON.stringify(router.currentRoute.value.params)!='{}'){
        searchParam = {...searchParam,...router.currentRoute.value.params};
    }else{
        let search = JSON.parse(window.sessionStorage.getItem("vuex"))
        if(search.studentDetails.routeParams && JSON.stringify(search.studentDetails.routeParams)!='{}'){
            searchParam = search.studentDetails.routeParams;
        }
    }
    getDataList("first");
};

let getDataList=(key)=>{
    if(key == 'first'){
        pagenation.pageIndex = 1;
        pagenation.pageSize = 10;
    }
    let dataUrl = '';
    if(searchParam.type == 1){
        dataUrl = '/ft/classmanage/getCustomerOnlineList.do';
    } else {
        dataUrl = '/ft/campus/getCustomerOnlineList.do';
    }
    let _this = this;
    loading.value = true;
    let param = new URLSearchParams();
    param.append("subjectType", searchParam.subjectType || '');// 班级科目
    param.append("areaId", searchParam.areaId || '');// 授课地点
    param.append("className", searchParam.className || '');// 班级名称
    param.append("classId", searchParam.classId || '');// 班级id
    param.append("yearly", searchParam.yearly || '');// 学年
    if((searchParam.productIds && searchParam.productIds.length) > 0){
        param.append("productIds", searchParam.productIds.join(',') || '');// 产品线
    } else {
        param.append("productIds", '');// 产品线
    }
    param.append("paperType", searchParam.paperType || '');// 试卷种类（0、北京卷 1、全国卷）
    param.append("grade", searchParam.grade || '');// 年级
    param.append("classType", searchParam.classType || '');// 班级类型 （0行政班 1教学班）
    param.append("pageNo",pagenation.pageIndex);
    param.append("pageSize",pagenation.pageSize);
    proxy.$post(baseUrl + dataUrl,param).then(res => {
        loading.value = false;
        if(res.data.code !==0){
            proxy.$message.error(res.data.msg);
            return false;
        }
        dataLists = res.data.data.items || [];
        pagenation.totalPage = res.data.data.totalSize || 0;
    })
}
 //分页
let sizeChangeHandle= (val)=>{
   pagenation.pageSize = val;
   pagenation.pageIndex = 1;
   getDataList();
};
// 当前页
let currentChangeHandle= (val)=>{
    pagenation.pageIndex = val;
    getDataList();
};
 /**
 * 导出
 */
let exportData= ()=>{
    loading.value=true;
    let downUrl = '';
    if(searchParam.type == 1){
        downUrl = '/ft/classmanage/downloadCustomerOnlineList.do';
    } else {
        downUrl = '/ft/campus/downloadCustomerOnlineList.do';
    }
    let exportObj ={responseType: 'blob'};
    let param = new URLSearchParams();
    param.append("subjectType", searchParam.subjectType || '');// 班级科目
    param.append("areaId", searchParam.areaId || '');// 授课地点
    param.append("className", searchParam.className || '');// 班级名称
    param.append("classId", searchParam.classId || '');// 班级id
    param.append("yearly", searchParam.yearly || '');// 学年
    if((searchParam.productIds && searchParam.productIds.length) > 0){
        param.append("productIds", searchParam.productIds.join(',') || '');// 产品线
    } else {
        param.append("productIds", '');// 产品线
    }
    param.append("paperType", searchParam.paperType || '');// 试卷种类（0、北京卷 1、全国卷）
    param.append("grade", searchParam.grade || '');// 年级
    param.append("classType", searchParam.classType || '');// 班级类型 （0行政班 1教学班）
    proxy.$post(baseUrl + downUrl, param, exportObj)
    .then(res=>{
        let headerContent = res.headers['content-disposition'];   
        if(headerContent){
            let filenameStr = headerContent.split('=')[1];
            let blobobj = new Blob([res.data],{type:'application/vnd.ms-excel'});
            downFile(blobobj, decodeURI(filenameStr));
        }
        loading.value = false;
    })
};
//跳360用户详情
let toStuDetail=(row)=>{
    toCusInfo(row.customerId);
};
</script>

// <script>
// export default {
//     name: 'studentDetails',
//     data() {
//         return {
//             loading: false,
//             loadingd: false,
//             dateToString2: dateToString2,
//             dataLists: [],
//             searchParam: {},
//             pagenation: {
//                 pageIndex: 1,
//                 pageSize: 10,
//                 totalPage: 0,
//             },
//             isDel:false
//         }
//     },
//     created(){
//         this.getSessionSearch();
//     },
//     beforeRouteLeave (to, from, next) {        
//         if ( to.name == '') {
//             // 根据是否删除操作，进行判断是否需要使用缓存数据
//             to.meta.isUseCache = this.isDel; 
//             this.isDel=false;
//         } else {
//             to.meta.isUseCache = false; 
//         }
//         next();    
//     },
//     activated() {
//         // isUseCache为false时才重新刷新获取数据
//         // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
//         if(this.$route.meta.isUseCache == true){
//             this.searchParam = this.$route.params;
//             this.getDataList("first");
//         } 
//         // 通过这个控制刷新
//         this.$route.meta.isUseCache = false;
//     },
//     methods: {
//         getSessionSearch(){
//             if(JSON.stringify(this.$route.params)!='{}'){
//                 this.searchParam = this.$route.params;
//             }else{
//                 let search = JSON.parse(window.sessionStorage.getItem("vuex"))
//                 if(JSON.stringify(search.studentDetails.routeParams)!='{}'){
//                     this.searchParam = search.studentDetails.routeParams;
//                 }
//             }
//             this.getDataList("first");
//         },
//         //分页
//         sizeChangeHandle (val) {
//             this.pagenation.pageSize = val;
//             this.pagenation.pageIndex = 1;
//             this.getDataList();
//         },
//         // 当前页
//         currentChangeHandle (val) {
//             this.pagenation.pageIndex = val;
//             this.getDataList();
//         },
//         /**
//          * 默认查询列表
//          */
//         getDataList(key){
//             if(key == 'first'){
//                 this.pagenation.pageIndex = 1;
//                 this.pagenation.pageSize = 10;
//             }
//             let dataUrl = '';
//             if(this.searchParam.type == 1){
//                 dataUrl = '/ft/classmanage/getCustomerOnlineList.do';
//             } else {
//                 dataUrl = '/ft/campus/getCustomerOnlineList.do';
//             }
//             let _this = this;
//             _this.loading = true;
//             let param = new URLSearchParams();
//             param.append("subjectType", this.searchParam.subjectType || '');// 班级科目
//             param.append("areaId", this.searchParam.areaId || '');// 授课地点
//             param.append("className", this.searchParam.className || '');// 班级名称
//             param.append("classId", this.searchParam.classId || '');// 班级id
//             param.append("yearly", this.searchParam.yearly || '');// 学年
//             if((this.searchParam.productIds && this.searchParam.productIds.length) > 0){
//                 param.append("productIds", this.searchParam.productIds.join(',') || '');// 产品线
//             } else {
//                 param.append("productIds", '');// 产品线
//             }
//             param.append("paperType", this.searchParam.paperType || '');// 试卷种类（0、北京卷 1、全国卷）
//             param.append("grade", this.searchParam.grade || '');// 年级
//             param.append("classType", this.searchParam.classType || '');// 班级类型 （0行政班 1教学班）
//             param.append("pageNo",this.pagenation.pageIndex);
//             param.append("pageSize",this.pagenation.pageSize);
//             this.$axios.post(baseUrl + dataUrl,param).then(res => {
//                 _this.loading = false;
//                 if(res.data.code !==0){
//                     _this.$message.error(res.data.msg);
//                     return false;
//                 }
//                 _this.dataLists = res.data.data.items || [];
//                 _this.pagenation.totalPage = res.data.data.totalSize || 0;
//             })
//         },
//         /**
//          * 导出
//          */
//         exportData(){
//             this.loading=true;
//             let downUrl = '';
//             if(this.searchParam.type == 1){
//                 downUrl = '/ft/classmanage/downloadCustomerOnlineList.do';
//             } else {
//                 downUrl = '/ft/campus/downloadCustomerOnlineList.do';
//             }
//             let exportObj ={responseType: 'blob'};
//             let param = new URLSearchParams();
//             param.append("subjectType", this.searchParam.subjectType || '');// 班级科目
//             param.append("areaId", this.searchParam.areaId || '');// 授课地点
//             param.append("className", this.searchParam.className || '');// 班级名称
//             param.append("classId", this.searchParam.classId || '');// 班级id
//             param.append("yearly", this.searchParam.yearly || '');// 学年
//             if((this.searchParam.productIds && this.searchParam.productIds.length) > 0){
//                 param.append("productIds", this.searchParam.productIds.join(',') || '');// 产品线
//             } else {
//                 param.append("productIds", '');// 产品线
//             }
//             param.append("paperType", this.searchParam.paperType || '');// 试卷种类（0、北京卷 1、全国卷）
//             param.append("grade", this.searchParam.grade || '');// 年级
//             param.append("classType", this.searchParam.classType || '');// 班级类型 （0行政班 1教学班）
//             this.$axios.post(baseUrl + downUrl, param, exportObj)
//             .then(res=>{
//                 let headerContent = res.headers['content-disposition'];   
//                 if(headerContent){
//                     let filenameStr = headerContent.split('=')[1];
//                     let blobobj = new Blob([res.data],{type:'application/vnd.ms-excel'});
//                     downFile(blobobj, decodeURI(filenameStr));
//                 }
//                 this.loading = false;
//             })
//         },
//         //跳360用户详情
//         toStuDetail(row){
//             toCusInfo(row.customerId);
//         }
//     }
// }
// </script>
<style lang="scss" scoped>
  
</style>